<template>
    <div class="myintiveinfo">
        <div class="con">
            <van-nav-bar :border="false" title="我的团队" left-arrow @click-left="onClickLeft" />
            <van-grid :border="false">
                <van-grid-item class="van-grid-child1">
                    <div class="tit">总人数</div>
                    <div class="num">+{{ list.total }}</div>
                </van-grid-item>
                <van-grid-item>
                    <div class="tit">今日</div>
                    <div class="num">+{{ list.total1 }}</div>
                </van-grid-item>
                <van-grid-item>
                    <div class="tit">昨日</div>
                    <div class="num">+{{ list.total2 }}</div>
                </van-grid-item>
                <van-grid-item>
                    <div class="tit">本月</div>
                    <div class="num">+{{ list.total3 }}</div>
                </van-grid-item>
            </van-grid>
            <div class="top">
                <div class="crad">
                    <div class="tit">直属成员<van-icon name="arrow" /></div>
                    <div class="conNum">{{ list.total4 }} 人</div>
                </div>
                <div class="crad">
                    <div class="tit">间属成员<van-icon name="arrow" /></div>
                    <div class="conNum">{{ list.total5 }} 人</div>
                </div>
            </div>
        </div>
        <div class="mid">
            <div class="tit">团队明细</div>
            <div class="control">
                <van-button @click="onClickButton">{{ value1 }}<van-icon name="play"
                        style="transform: rotate(90deg)"></van-icon></van-button>
                <van-button @click="onClickButtonTime">{{ value2}}<van-icon name="play"
                        style="transform: rotate(90deg)" /></van-button>
            </div>
            <div class="list" v-for="item in listData">
                <div class="tit">
                    <van-image round width="35" height="35" :src="item.avatar" />
                    <span>{{ item.username }}</span>
                </div>
                <div class="time">{{ item.createtime }}</div>
            </div>
        </div>
    </div>
    <van-popup v-model:show="showPicker" round position="bottom">
        <van-picker :columns="columns" @cancel="showPicker = false" @confirm="onConfirm" />
    </van-popup>
</template>

<script setup lang="ts">
import { ref,onMounted } from 'vue';
import { Toast } from 'vant';
import { useRouter } from 'vue-router';
import { myTeam } from '../../../../api/index';
const active = ref(0);
const router = useRouter();
const imgCodeUrl = ref("https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg");
// 定义onClickLeft方法
const onClickLeft = () => history.back();
const routerTo = (str: string) => router.push('/mine/myteam' + str.toLowerCase())
let formData=new FormData();
const value1 = ref('直属成员');
const value2 = ref('2024年04月');
const valueDate = ref([]);
const showPicker = ref(false);
const listData=ref([]);
const list=ref([]);

let columns = ref([])
const columnMebs: any = ['直属成员', '间属成员'];
const columnTimes: any = [
    // 第一列
    {
        values: ['2021', '2022', '2023', '2024'],
        defaultIndex: 2,
    },
    // 第二列
    {
        values: ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"],
        defaultIndex: 1,
    },
];
const onClickButton=()=>{
    showPicker.value = true;
    columns.value=columnMebs;
}
const onClickButtonTime =()=>{
    showPicker.value = true;
    columns.value = columnTimes;
}

const onConfirm = (value:string) => {
    console.log(value)
    if (/直属成员|间属成员/.test(value)) {
        value1.value=value
    } else {
        valueDate.value=value
        value2.value = `${value[0]}年${value[1]}月`
    }
    console.log(value2.value)
    formData.append("page_size", "15");
    formData.append("type", value1.value =="直属成员"?"1":"2");
    formData.append("date", `${valueDate.value[0]}/${valueDate.value[1]}`);
    myTeam(formData).then(res => {
        console.log(res.data)
        if (res.code == 1) {
            listData.value = res.data.lists.data
            list.value = res.data
        } else {
            Toast(res.msg)
        }
    })
    formData = new FormData();

    showPicker.value = false;
};

onMounted(()=>{
    formData.append("page_size", "15");
    formData.append("type", "1");
    formData.append("date", "");
    myTeam(formData).then(res=>{
        console.log(res.data)
        if (res.code==1) {
            listData.value = res.data.lists.data
            list.value = res.data
        }else{
            Toast(res.msg)
        }
    })
    formData = new FormData();
})

</script>

<style lang="less" scoped>

.myintiveinfo {
    background: #F6F7F9;
    width: 100%;
    height: 100%;
    background-image: url(../../../../assets/my/mytembkg.png);
    background-repeat: no-repeat;
    background-position: top left;
    background-size: 375px 345px;
}

.con {
    height: 100%;

    .van-nav-bar {
        height: 52px;
        background: none;
        color: #FFFFFF;
        content: none;
    }
    padding: 34px 20px 0;

    .van-grid {
        background: none;

        :deep(.van-grid-item__content) {
            background: none;
            font-size: 12px;
            color: #FFFFFF;

            .tit {
                font-size: 12px;
            }

            .num {
                margin-top: 10px;
                font-size: 16px;
            }

        }

        :deep(.van-grid-child1) {
            .tit {
                font-size: 16px;
            }

            .num {
                font-size: 22px;
            }
        }
    }

    .top {
        width: 100%;
        display: flex;
        justify-content: space-between;

        .crad {
            width: 46%;
            height: 88px;
            background: #FFFFFF;
            border-radius: 7px 7px 7px 7px;
            padding: 15px;
            text-align: left;
            display: flex;
            justify-content: space-around;
            flex-direction: column;
            box-sizing: border-box;

            .tit {
                font-size: 12px;
                color: #3D3D3D;
            }

            .conNum {
                font-size: 18px;
                color: #3D3D3D;
            }
        }
    }

}

.mid {
    height: 100%;
    width: 100%;
    background: #FFFFFF;
    border-radius: 15px 15px 0px 0px;
    padding: 20px 15px;
    box-sizing: border-box;
    margin-top: 16px;
    .tit {
        font-size: 18px;
        color: #3D3D3D;
        text-align: left;
    }

    .control {
        text-align: left;
        margin: 17px auto 20px;

        .van-button {
            width: 93px;
            height: 27px;
            border-radius: 7px 7px 7px 7px;
            border: 1px solid #999999;
            font-size: 12px;
            color: #3D3D3D;
            white-space: nowrap;
            margin-right: 15px;
            box-sizing: border-box;

            .van-icon {
                color: rgba(35, 35, 35, 0.1);
                margin: auto 7px;
            }
            &:nth-child(2){
                :deep(.van-button__text) {
                    padding-left: 8px;
                }
            }
        }
    }

    .list {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 14px;

        .tit {
            display: flex;
            align-items: center;

            span {
                font-size: 14px;
                color: #232323;
                margin-left: 13px;
            }
        }

        .time {
            font-size: 12px;
            color: #3D3D3D;
        }
    }
}


:deep(.van-nav-bar__left .van-badge__wrapper) {
    color: #FFFFFF;

}

:deep(.van-nav-bar__left) {
    padding: 0;
}

:deep(.van-nav-bar__content .van-nav-bar__title) {
    color: #FFFFFF;
}

// :deep(.van-hairline--bottom::after){
//     content: none;
// }</style>